Упражнения на разработку web-страниц Упражнение 1

1. Запустите Блокнот.

2. Создайте документ HTML со следующими установками:

Название ­– Моя страница

Заголовок 1 уровня по центру – Мой первый WEB-документ

Заголовок 2 уровня по правому краю – Текст с заголовками и абзацами

1 абзац – Файл 1.HTM

2 абзац – Каталог HTM

3. Сохраните документ под именем 1.HTM.

4. Откройте браузер Internet Explorer.

5. Откройте документ 1.HTM.

При неправильном отображении исправьте документ, сохраните его и просмотрите его снова в браузере.

Упражнение 2.1

1. Запустите текстовый редактор HTML.

2. Откройте документ 1. HTM и отредактируйте его со следующими установками:

Название ­– Моя вторая WEB-страница

Комментарий – горизонтальные линии и эскейп-последовательности

Заголовок 2 уровня по центру – “Мой второй WEB-документ”

Заголовок 4 уровня по центру –

<Текст с линиями и эскейп-последовательностями >

абзац –

“Файл 2.HTM”

перевод на новую строку

тонкая горизонтальная линия на весь экран

“Каталог HTM”

перевод на новую строку

толстая горизонтальная линия 50% от ширины экрана

3. Сохраните документ под именем 2.HTM.

4. Откройте в браузере Internet Explorer документ 2.HTM.

Упражнение 2.2

1. Создайте новый документ по образцу, используя форматирование текста физическими и логическими стилями.

2. Сохраните его под именем 3.HTM.

3. Откройте браузер Internet Explorer.

4. Откройте документ 3.HTM.

Упражнение 3

1. Откройте файл 3.HTM и отредактируйте его, используя различные виды списков.

2. Сохраните его под именем 4.HTM.

3. Просмотрите в браузере Internet Explorer документ 4.HTM.

Упражнение 4.1

1. Откройте файл 4.HTM и отредактируйте его с гиперссылками для переходов:

Моя биография – на файл 1.HTM

Рассказ о моей семье – на файл 2.HTM

Несколько фотографий – на сайт www.gor.h1.ru.

2. Создайте анкер в начале страницы с именем TOP.

3. Создайте гиперссылку В начало страницы в конце документа с переходом на анкер TOP.

4. Создайте гиперссылку [e-mail] для перехода в почтовую программу.

5. Сохраните файл под именем 5.HTM и просмотрите в браузере.

Упражнение 4.2

1. Откройте файл 5.HTM.

2. Вставьте в страницу изображение из файла picture.gif с альтернативным текстом Моя картинка.

3. Сделайте это изображение гиперссылкой на сайт www.gor.h1.ru.

4. Сохраните файл под именем 6.HTM и просмотрите в браузере.

Упражнение 5.1

1. Откройте файл 6.HTM.

2. Выполните установки цветовой гаммы:

• фон страницы – серого цвета,

• текст – зеленого цвета,

• гиперссылку – синего цвета,

• использованную гиперссылку – голубого цвета,

3. Сделайте фон страницы с помощью файла изображения background.gif.

4. Сохраните файл под именем 7.HTM и просмотрите в браузере.

Упражнение 5.2

1. Откройте файл 7.HTM.

2. Выполните установки с помощью МЕТА-инструкций:

• Ключевые слова – увлечения, фотографии, друзья, семья

• Содержание страницы – Знакомство с моими увлечениями и биографией

• Текст в кодировке Windows.

3. Выполните установки другой цветовой гаммы.

4. Сохраните файл под именем 8.HTM и просмотрите в браузере.

5. Создайте слайд-демонстрацию путем циклического перехода из этого файла к 7.HTM и обратно.

Упражнение 6.1

1. Откройте файл 6.HTM.

2. Создайте таблицу и разместите ее по центру экрана.

3. Сохраните файл под именем 9.HTM и просмотрите в браузере.

Упражнение 6.2

Создайте новый файл 10.HTM со следующей таблицей по центру экрана:

Ширина таблицы – 500

Ширина 1 ячейки – 150

Ширина 2 ячейки – 350.

Упражнение 6.3

Отредактируйте файл 10.HTM, вставив в соответствующие ячейки таблицы информацию из файла 6.HTM, и сохраните под именем 11.HTM.

Упражнение 7.1

1. Создайте новый файл 12.HTM.

2. С помощью форм разместите в нем 3 кнопки по центру страницы.

• Моя биография – на файл 11.HTM

• Рассказ о моей семье – на файл 10.HTM

• Несколько фотографий – на сайт http://www.smtu.ru/.

3. В файлах 10.HTM и 11.HTM сделайте возможным переход по кнопкам назад на файл 12.HTM.

4. Сохраните все файлы.

Упражнение 7.2

1. Создайте новый файл 13.HTM с формой заполнения Данных о себе.

2. С помощью <INPUT> и типа элемента TEXT создайте 2 поля для ввода фамилии и имени.

3. С помощью <INPUT> и типа элемента PASSWORD создайте поле для ввода ИНН длиной 25 чисел.

4. С помощью <INPUT> и типа элемента RADIO создайте 4 радиокнопки для выбора возраста:

• 17-23

• 24-30

• 31-35

• 36-40

С помощью <INPUT> и типа элемента CHECKBOX создайте 4 кнопки для определения любимых занятий:

• чтение книг

• просмотр фильмов

• игра на компьютере

• прогулка на природе

Создайте кнопку для очистки полей формы.